<!DOCTYPE html>
<!--
  ~ Copyright (C) 2018 guomw.Inc. All rights reserved.
  ~ 项目名称： mysite
  ~ 文件名称： desktop.html
  ~ Date：18-10-11 下午5:16
  ~ Author: guomw
  -->

<html xmlns:th="http://www.thymeleaf.org" style="height: 100%">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>

    <link href="../../resource/css/bootstrap.min.css?v=3.3.5" rel="stylesheet"
          th:href="@{/resource/css/bootstrap.min.css?v=3.3.5}"/>
    <link href="../../resource/css/font-awesome.min.css?v=4.4.0" rel="stylesheet"
          th:href="@{/resource/css/font-awesome.min.css?v=4.4.0}"/>
    <!-- Morris -->
    <link href="../../resource/css/plugins/morris/morris-0.4.3.min.css"
          th:href="@{/resource/css/plugins/morris/morris-0.4.3.min.css}" rel="stylesheet">
    <link href="../../resource/css/animate.min.css" rel="stylesheet" th:href="@{/resource/css/animate.min.css}"/>


    <link href="../../resource/css/style.min.css?v=4.0.0" rel="stylesheet"
          th:href="@{/resource/css/style.min.css?v=4.0.0}"/>
    <link href="../../resource/hotui/css/hotui.style.override.css"
          th:href="@{/resource/hotui/css/hotui.style.override.css}" rel="stylesheet"/>
    <!--openlayers地图css-->
    <link rel="stylesheet" type="text/css" href="../../resource/openLayers/css/ol.css"
          th:href="@{/resource/openLayers/css/ol.css}"/>
    <!--树状图css-->
    <link href="../../resource/hotui/css/plugins/treeview/bootstrap-treeview.css" rel="stylesheet"
          th:href="@{/resource/hotui/css/plugins/treeview/bootstrap-treeview.css}"/>
    <!--表格相关css-->
    <link href="../../resource/hotui/css/plugins/dataTables/dataTables.bootstrap.css" rel="stylesheet"
          th:href="@{/resource/hotui/css/plugins/dataTables/dataTables.bootstrap.css}"/>

</head>
<style>
    .css_animation {
        height: 30px;
        width: 30px;
        border-radius: 25px;
        background: rgba(255, 0, 0, 0.9);
        transform: scale(0);
        animation: myfirst 3s;
        animation-iteration-count: infinite;
    }

    .css_animation_location {
        height: 30px;
        width: 30px;
        border-radius: 25px;
        background: rgba(0, 255, 0, 0.9);
        transform: scale(0);
        animation: myfirst 3s;
        animation-iteration-count: infinite;
    }

    .ol-viewport {
        /*完全透明*/
        /*background-color: rgba(0, 0, 0, 0);*/
        /*完全不透明*/
        /*background-color: rgba(0, 0, 0, 1);*/
    }

    .dataTables_wrapper {
        padding-bottom: 0 !important;
    }

    .max-height {
        max-height: 200px !important;
        overflow-y: auto;
    }

    @keyframes myfirst {
        to {
            transform: scale(2);
            background: rgba(0, 0, 0, 0);
        }
    }
</style>

<body class="gray-bg" style="height: 100%">
<div style="position: relative;height: 100%">
    <input id="strId" name="strId" minlength="2" type="hidden" class="form-control" th:value="${strId}"/>
    <input id="userId" name="userId" minlength="2" type="hidden" class="form-control" th:value="${userId}"/>
    <input id="userName" name="userName" minlength="2" type="hidden" class="form-control" th:value="${userName}"/>
    <input id="selectNo" name="selectNo" type="hidden"/>

    <!--树状图-->
    <div id="treeview11" class="test col-sm-3 white-bg"
         style="width:15%;height:100%;position:absolute;top: 0;left: 0;overflow-y: auto;padding: 0 0 0 0"></div>

    <div id="iframe-statistic"
         style="z-index:999;position: absolute;top :0; right:0;width: 85%;height: 100%;background-color: #fff;">
        <iframe id="statistic"
                style="position: absolute;top :0; right:0;width: 100%;height: 100%;background-color: #fff;"></iframe>
    </div>

    <div style="z-index:888;position: absolute;top :0; right:0;width: 85%;height: 100%;background-color: #fff;">
        <div id="map" class="map table-bordered" style="float:left;height:100%;width: 100%;">
        </div>
        <div class="col-sm-6" style="position:absolute;top: 10px;left: 2%;width: 20%;">
            <div class="ibox float-e-margins">
                <div class="ibox-title" style="min-height: 35px;padding: 10px 15px 7px;border-width: 0">
                    <h5 id="strName" name="strName" th:text="${strName}"></h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-down"></i>
                        </a>
                    </div>
                </div>
                <div class="ibox-content max-height" style="padding: 0;">
                    <table class="table table-striped">
                        <tbody id="table-content">

                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <!--下拉搜索框-->
        <form class="col-lg-4" action="index_submit" method="get" accept-charset="utf-8" role="form"
              style="max-height:70%; position:absolute;top: 10px;left: 21%;width: 21%;">
            <div class="input-group">
                <input type="text" class="form-control" id="testNoBtn" placeholder="请输入姓名或卡号">
                <div class="input-group-btn">
                    <button type="button" class="btn btn-success" style="display: none">查询</button>
                    &nbsp;&nbsp;&nbsp;
                    <button type="button" class="btn btn-success" style="" onclick="treeHandler.selectTrack()">查询轨迹
                    </button>
                    <ul class="dropdown-menu dropdown-menu-right" role="menu" style="max-height: 10%">
                    </ul>
                </div>
                <!-- /btn-group -->

            </div>
        </form>
        <!--地图弹框-->
        <div id="popup" class="ol-popup">
            <a href="#" id="popup-closer" class="ol-popup-closer"></a>
            <div id="popup-content">
            </div>
        </div>

        <div class="ibox float-e-margins col-sm-6"
             style="position:absolute;bottom: 0;right: 0;margin-bottom: 0;width: 65%">
            <div class="ibox-title">
                <h5>报警列表<span class="color-danger" style="display: none;" id="alarmMark">（报警中）</span></h5>
                <div class="ibox-tools">
                    <a id="alarmA" href="javascript:treeHandler.toggleAlarmList();">
                        <i class="fa fa-chevron-up"></i>
                    </a>
                </div>
            </div>
            <div id="alarmListContent" class="ibox-content" style="height:300px;overflow-y: auto;display:none;">
                <!--                <iframe style="width: 100%;height: 250px;border: none" th:src="@{/msg/alarm/forDesktop(alarmStatus=0)}"-->
                <!--                        src="http://www.baidu.com"></iframe>-->
                <table class="table table-bordered table-hover table-center">
                    <thead>
                    <tr>
                        <th>报警类型</th>
                        <th>所属用户</th>
                        <th>用户类型</th>
                        <th>报警位置</th>
                        <th>设备编号</th>
                        <th>报警状态</th>
                        <th>首次报警时间</th>
                        <th>最新报警时间</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody id="alarmContent">
                    </tbody>
                </table>
            </div>
        </div>
    </div>

</div>

<script type="text/html" id="alarm_group_template">
    <tr>
        <td>{{alarmType}}</td>
        <td>{{username}}</td>
        <td>{{userType}}</td>
        <td>{{address}}</td>
        <td>{{locatorId}}</td>
        <td>{{alarmStatus}}</td>
        <td>{{createTime}}</td>
        <td>{{updateTime}}</td>
        <td>
            <button onclick="treeHandler.timerLocation({{userId}},2)" type="button"
                    class="btn btn-info btn-xs m-b-none">定位
            </button>
            <button onclick="treeHandler.stewardNearby({{userId}})" type="button"
                    class="btn btn-info btn-xs m-b-none">附近管家
            </button>
        </td>
    </tr>
</script>


<script type="text/html" id="table-content-template">
    <tr onclick="treeHandler.userInfo('{id}','{name}')">
        <td>{name}</td>
        <td class="text-navy">{count}</td>
    </tr>
</script>
<!--基础框架js-->
<script src="http://cdn.viptool.cn/lib/jquery/2.2.4/jquery.min.js"
        th:src="@{/resource/hotui/js/jquery.min.js?20190316}"></script>

<script src="http://cdn.viptool.cn/lib/bootstrap/3.3.5/js/bootstrap.min.js"
        th:src="@{/resource/hotui/js/bootstrap.min.js?20190316}"></script>

<script src="../../resource/hotui/js/hot/bootstrap.hot.extra-utils.js?20190316"
        th:src="@{/resource/hotui/js/hot/bootstrap.hot.extra-utils.js?20190316}"></script>
<script src="../../resource/hotui/js/hot/bootstrap.hot.extra-init.js?20190316?1234567"
        th:src="@{/resource/hotui/js/hot/bootstrap.hot.extra-init.js?20190316(123)}"></script>
<script src="../../resource/hotui/js/content.min.js" th:src="@{/resource/hotui/js/content.min.js}"></script>
<script src="http://cdn.viptool.cn/lib/moment.js/2.19.2/moment.min.js"></script>


<script src="../../resource/hotui/js/plugins/datetimepick/js/daterangepicker.js"
        th:src="@{/resource/hotui/js/plugins/datetimepick/js/daterangepicker.js}"></script>
<script src="../../resource/lib/bootstrap-datepicker/js/bootstrap-datepicker.min.js"
        th:src="@{/resource/lib/bootstrap-datepicker/js/bootstrap-datepicker.min.js}"></script>
<script src="../../resource/lib/bootstrap-datepicker/js/locales/bootstrap-datepicker.zh-CN.min.js"
        th:src="@{/resource/lib/bootstrap-datepicker/js/locales/bootstrap-datepicker.zh-CN.min.js}"></script>
<script src="http://cdn.viptool.cn/lib/switchery/0.8.2/switchery.min.js"></script>

<script src="http://cdn.viptool.cn/lib/jquery-validate/1.17.0/jquery.validate.min.js"></script>

<script src="http://cdn.viptool.cn/lib/jquery-validate/1.17.0/localization/messages_zh.min.js"></script>

<script src="../../resource/hotui/js/hot/bootstrap.hot.extra-validate.js"
        th:src="@{/resource/hotui/js/hot/bootstrap.hot.extra-validate.js}"></script>

<!--表格相关js-->
<script src="../../resource/hotui/js/plugins/jeditable/jquery.jeditable.js"
        th:src="@{/resource/hotui/js/plugins/jeditable/jquery.jeditable.js}"></script>
<script src="../../resource/hotui/js/plugins/dataTables/jquery.dataTables.js"
        th:src="@{/resource/hotui/js/plugins/dataTables/jquery.dataTables.js}"></script>
<script src="../../resource/hotui/js/plugins/dataTables/dataTables.bootstrap.js"
        th:src="@{/resource/hotui/js/plugins/dataTables/dataTables.bootstrap.js}"></script>
<!--树状图相关js-->
<script src="../../resource/hotui/js/plugins/treeview/bootstrap-treeview.js"
        th:src="@{/resource/hotui/js/plugins/treeview/bootstrap-treeview.js}">
</script>
<!--搜索框相关js-->
<script src="js/plugins/suggest/bootstrap-suggest.min.js"
        th:src="@{/resource/hotui/js/plugins/suggest/bootstrap-suggest.min.js}"></script>
<!--地图相关js-->
<script src="../../resource/openLayers/js/ol.js" th:src="@{/resource/openLayers/js/ol.js}"></script>
<script src="../../resource/js/map/desktopMap.js" th:src="@{/resource/js/map/desktopMap.js}"></script>
<script type="text/javascript" th:inline="javascript">
    const mapBase = /*[[@{/map}]]*/ "/map";
    const path = "http://" + document.location.host;
    const alarmApiUri = /*[[@{/msg/alarm}]]*/ "/map";
    const stewardUri = /*[[@{/alarm/manage/list/}]]*/ "/map";
</script>
<script type="text/javascript">
    var timer;
    var localTimer;
    $(function () {
        var url = encodeURI('[[${data}]]');
        var strId = '[[${strId}]]';
        var userId = '[[${userId}]]';


        if (userId != '' && userId != null) {
            document.getElementById("iframe-statistic").style.display = "none";
            treeHandler.timerLocation(userId, 2);
            strId = $("strId").val();
        } else {
            document.getElementById("statistic").src = "/statistic/count?strId=" + strId;
            helper.initIndeMap(strId, url);
        }
        treeHandler.initTree();
        treeHandler.initSuggest();

        treeHandler.countUser(strId);
        treeHandler.userLocal(strId);
        //统计人数
        timer = setInterval(function () {
            treeHandler.countUser(strId);
            treeHandler.userLocal(strId);
        }, 4000);

        //报警
        treeHandler.alarmList();
        setInterval(function () {
            treeHandler.alarmList();
        }, 5000)
    });
    var treeHandler = {
        alarmShow: function () {
            if ($(".collapse-link i").hasClass("fa-chevron-down")) {
                $(".collapse-link").click();
            }
        },
        alarmHide: function () {
            if ($(".collapse-link i").hasClass("fa-chevron-up")) {
                $(".collapse-link").click();
            }
        },
        //展示右边的社区树
        initTree: function () {
            $.ajax({
                url: mapBase + "/structure/tree", //请求路径
                type: "post", //请求方式
                success: function (apiResult) {
                    $("#treeview11").treeview({
                        levels: 99,
                        color: "#708340",
                        data: apiResult.data,
                        onNodeSelected: function (e, o) {
                            if (o.pstrId == 0) {
                                document.getElementById("iframe-statistic").style.display = "";
                                document.getElementById("statistic").src = "/statistic/count?strId=" + o.strId;
                            } else {
                                document.getElementById("iframe-statistic").style.display = "none";
                            }
                            clearInterval(localTimer);
                            map.removeOverlay(point_overlay);
                            if (o.url == "" || o.url == null) {
                                return;
                            }
                            $("#strId").val(o.strId);
                            $("#strName").text(o.text);
                            var url = encodeURI(o.allUrl);
                            helper.initIndeMap(o.strId, url);
                            //统计人数
                            clearInterval(timer);
                            treeHandler.countUser(o.strId);
                            treeHandler.userLocal(o.strId);
                            timer = setInterval(function () {
                                treeHandler.countUser(o.strId);
                                treeHandler.userLocal(o.strId);
                            }, 4000);
                        }
                    });

                },
                error: function () {

                },
                dataType: "json" //服务器响应的数据格式
            });
        },
        //初始化搜索下拉框用户列表
        initSuggest: function () {
            $("#testNoBtn").bsSuggest('init', {
                clearable: true,
                url: mapBase + "/user/list",
                showBtn: false,
                idField: ["userId", "name", "cardNo"], //id字段
                keyField: ["name", "cardNo"], //key字段
                effectiveFields: ["userId", "name", "cardNo"], //显示的有效字段
                effectiveFieldsAlias: {
                    "userId": "ID",
                    "name": "姓名",
                    "cardNo": "卡号"
                }, //字段别名,title显示
                getDataMethod: "firstByUrl", //获取数据的方式，url：一直从url请求；data：从 options.data 获取；firstByUrl：第一次从Url获取全部数据，之后从options.data获取
                delayUntilKeyup: true, //获取数据的方式为 firstByUrl 时，延迟到有输入/获取到焦点时才请求数据
                indexKey: 1,
            }).on("onSetSelectValue", function (e, keyword) {
                //选择时，定位到选中的人的位置
                treeHandler.timerLocation(keyword.id, 1);
            }).on("onUnsetSelectValue", function (e) {
                $("#userId").val("");
            });
            $("form").submit(function (e) {
                return false
            });
        },
        //定位方法
        location: function (userId, type) {
            $.ajax({
                url: mapBase + "/location/msg", //请求路径
                type: "post", //请求方式
                data: {
                    userId: userId
                },
                success: function (apiResult) {
                    if (apiResult.resultCode == 4000) {
                        clearInterval(localTimer);
                        alert("未查询到该用户的定位信息");
                        return;
                    }
                    var o = apiResult.data;
                    //记录原来的地图id
                    var oldStrId = $("#strId").val();

                    $("#strId").val(o.structureId);
                    $("#strName").text(o.address);
                    if (o.imgUrl == null) {
                        clearInterval(localTimer);
                        alert("未找到地图，请联系管理员");
                        return;
                    }
                    $("#userId").val(userId);
                    //                    $("#testNoBtn").val(o.realName);
                    var url = encodeURI(o.imgUrl);
                    if (oldStrId != o.structureId) {
                        helper.initIndeMap(o.structureId, url);
                    }
                    treeHandler.countUser(o.structureId);
                    treeHandler.userLocal(o.structureId);
                    jsHelper.pointDiv(o, type);
                },
                error: function () {

                },
                dataType: "json" //服务器响应的数据格式
            });
        },
        //实时刷新定位
        timerLocation: function (userId, type) {
            clearInterval(localTimer);
            clearInterval(timer);
            treeHandler.location(userId, type);
            localTimer = setInterval(function () {
                treeHandler.location(userId, type);
            }, 4000);
        },
        stewardNearby: function (userId) {
            let uri = stewardUri + userId;
            hot.iframeModal(uri, '800px', '600px', '附近管家');
        },
        //查询历史轨迹
        selectTrack: function () {
            var userId = $("#userId").val();
            var userName = $("#testNoBtn").val();
            if (userId == '' || userId == null) {
                alert("请选择有效用户");
                return;
            }
            hot.iframeModal(mapBase + "/track?userId=" + userId, '100%', '100%', userName + "的轨迹");
        },
        //报警列表
        alarmList: function () {
            hot.ajax(alarmApiUri + "/alarmingList", null, function (apiResult) {
                if (apiResult.resultCode === 2000) {
                    let list = apiResult.data;
                    let appendHtml = "";
                    if (list.length === 0) {
                        // treeHandler.alarmHide();
                        $("#alarmMark").hide();
                    } else {
                        // treeHandler.alarmShow();
                        $("#alarmMark").show();
                    }
                    $.each(list, function (o, item) {
                        let tempHtml = $("#alarm_group_template").html();
                        tempHtml = tempHtml.replace('{{alarmType}}', item.alarmType);
                        tempHtml = tempHtml.replace('{{username}}', item.username);
                        tempHtml = tempHtml.replace('{{userType}}', item.userTypeDesc);
                        tempHtml = tempHtml.replace('{{address}}', item.address);
                        tempHtml = tempHtml.replace('{{locatorId}}', item.locatorId);
                        tempHtml = tempHtml.replace('{{alarmStatus}}', item.alarmStatus);
                        tempHtml = tempHtml.replace('{{createTime}}', item.createTime);
                        tempHtml = tempHtml.replace('{{updateTime}}', item.updateTime);
                        tempHtml = tempHtml.replace(/{{userId}}/g, item.userId);
                        appendHtml += tempHtml;
                    });
                    $("#alarmContent").html(appendHtml);
                }
            }, function () {
            }, "post");
        },
        //统计人数
        countUser: function (sId) {
            $.ajax({
                url: mapBase + "/statistics", //请求路径
                type: "post", //请求方式
                data: {
                    structureId: sId
                },
                success: function (apiResult) {
                    var appendHtml = '';
                    $.each(apiResult.data, function (i, item) {
                        var tempHtml = $("#table-content-template").html();
                        tempHtml = tempHtml.replace(/{name}/gm, item.name);
                        tempHtml = tempHtml.replace(/{count}/gm, item.count);
                        tempHtml = tempHtml.replace(/{id}/gm, item.structureId);
                        appendHtml += tempHtml;
                    });
                    $("#table-content").html(appendHtml);
                },
                error: function () {

                },
                dataType: "json" //服务器响应的数据格式
            });
        },
        //展示当前地图的人员位置
        userLocal: function (sId) {
            //每次展示先去掉原有图层
            if (map != null) {
                map.removeLayer(userPop);
                //新增人物图层
                userPop = new ol.layer.Vector({
                    source: new ol.source.Vector()
                });
                map.addLayer(userPop);

                $.ajax({
                    url: mapBase + "/location/msg/str/map", //请求路径
                    type: "post", //请求方式
                    data: {
                        strId: sId
                    },
                    success: function (apiResult) {
                        if (apiResult.resultCode === 2000) {
                            let list = apiResult.data;
                            $.each(list, function (o, item) {
                                jsHelper.showUser(item);
                            });
                        }
                    },
                    error: function () {

                    },
                    dataType: "json" //服务器响应的数据格式
                });

                // hot.ajax(mapBase + "/location/msg/str/map", {
                //     strId: sId
                // }, function (apiResult) {
                //     if (apiResult.resultCode === 2000) {
                //         let list = apiResult.data;
                //         $.each(list, function (o, item) {
                //             jsHelper.showUser(item);
                //         });
                //     }
                // }, function () {
                // }, "post");
            }
        },
        //展示当前地图的人员信息
        userInfo: function (id, name) {
            hot.iframeModal(mapBase + "/to/map/user/list?strId=" + id, '30%', '50%', name);
        },
        toggleAlarmList: function () {
            let $alarmA = $("#alarmA");
            let $i = $alarmA.find('i');
            let visible = $i.hasClass('fa-chevron-down');
            if (visible) {
                $("#alarmListContent").hide();
                $i.removeClass('fa-chevron-down');
                $i.addClass('fa-chevron-up');
            } else {
                $("#alarmListContent").show();
                $i.removeClass('fa-chevron-up');
                $i.addClass('fa-chevron-down');
            }
        }
    }
</script>
</body>

</html>